<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .bigbox{
        width: 300px;
        height: 200px;
        background-color: antiquewhite
       }
       .smbox{
        width: 200px;
        height: 150px;
        background-color:plum;
       }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smbox"></div>
    </div>
    <script>
        // DOM对象.addEventListener(type,callback,[captrue]);
        // captrue为可选参数,布尔类型
        // 如果是true,表示在捕获阶段调用事件处理程序;
        // 如果是false(默认值),表示在冒泡阶段调用事件处理程序;


        //事件源
        const ck = document.querySelector('.smbox');
        //事件绑定
        ck.addEventListener('ckick',function(evt){
            console.log(evt);
            console.log(evt.type); //事件类型
            evt.stopPropagation(); //阻止(事件)传播
            alert('点击小盒子')
        },false);
        
        const ck2 = document.querySelector('.bigbox');
            ck2.addEventListener('click',function(){
                alert('点击大盒子')
            },false)
       
    </script>
</body>
</html>